Firebase Cloud Messaging (FCM) হল একটি শক্তিশালী সিস্টেম যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে পুশ নোটিফিকেশন পাঠানোর জন্য ব্যবহৃত হয়। Ionic অ্যাপ্লিকেশনে Firebase Cloud Messaging ব্যবহার করে আপনি রিয়েল-টাইম পুশ নোটিফিকেশন পাঠাতে পারবেন।
এখানে Ionic অ্যাপে Firebase Cloud Messaging (FCM) ইন্টিগ্রেট করার জন্য বিস্তারিত গাইড দেয়া হলো।
১. Firebase প্রজেক্ট তৈরি করা
প্রথমে Firebase কনসোল থেকে একটি নতুন প্রজেক্ট তৈরি করতে হবে:
- Firebase কনসোল এ যান: Firebase Console
- "Add Project" এ ক্লিক করে একটি নতুন প্রজেক্ট তৈরি করুন।
- প্রজেক্ট তৈরি হওয়ার পর, Cloud Messaging সার্ভিসে প্রবেশ করুন।
২. Firebase Cloud Messaging সেটআপ করা
২.১ FCM সেবা সক্রিয় করা
- Firebase কনসোল থেকে আপনার প্রজেক্ট নির্বাচন করুন।
- Cloud Messaging ট্যাব এ ক্লিক করুন।
- Web Push Certificates বিভাগে, Firebase Cloud Messaging এর জন্য আপনার Server Key এবং Sender ID পাবেন, যা পরে Ionic অ্যাপে ব্যবহার করা হবে।
৩. Ionic প্রজেক্টে Firebase SDK ইনস্টল করা
Ionic অ্যাপে Firebase Cloud Messaging সেটআপ করতে Firebase SDK ইনস্টল করতে হবে।
৩.১ Firebase SDK ইনস্টল করা
npm install firebase @angular/fire
এই কমান্ডটি Firebase SDK এবং Angular Firebase লাইব্রেরি ইনস্টল করবে।
৪. Firebase সেটআপ এবং কনফিগারেশন
৪.১ Firebase কনফিগারেশন ডেটা
Firebase কনসোল থেকে আপনার প্রজেক্টের কনফিগারেশন ডেটা নিন (যেমন API Key, Auth Domain, Project ID, Storage Bucket, Messaging Sender ID ইত্যাদি)। এটি firebaseConfig হিসাবে সংরক্ষণ করুন।
import { Component } from '@angular/core';
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging';
import { getToken } from 'firebase/messaging';
import { environment } from '../environments/environment';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Firebase অ্যাপ ইনিশিয়ালাইজ করা
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
// FCM Token রিট্রিভ করা
this.getFCMToken(messaging);
}
async getFCMToken(messaging) {
try {
const currentToken = await getToken(messaging, {
vapidKey: "YOUR_PUBLIC_VAPID_KEY"
});
if (currentToken) {
console.log('FCM Token:', currentToken);
} else {
console.log('No registration token available.');
}
} catch (error) {
console.error('An error occurred while retrieving token.', error);
}
}
}
এখানে:
- firebaseConfig: এটি Firebase কনসোল থেকে পাওয়া কনফিগারেশন তথ্য।
- getToken: এটি FCM টোকেন তৈরি করে, যা সার্ভার থেকে নোটিফিকেশন পাঠাতে ব্যবহৃত হয়।
৫. Push Notification এর জন্য FCM Subscription
৫.১ Push Notification Permission চাওয়া
প্রথমবার পুশ নোটিফিকেশন গ্রহণের জন্য ইউজারের কাছ থেকে অনুমতি নিতে হবে। এটি করার জন্য ব্রাউজারের Notification API ব্যবহার করা হয়।
import { Component } from '@angular/core';
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging';
import { getToken } from 'firebase/messaging';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
this.getPermission(messaging);
}
async getPermission(messaging) {
try {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
this.getFCMToken(messaging);
} else {
console.log("Notification permission denied");
}
});
} catch (error) {
console.error("Error requesting permission", error);
}
}
async getFCMToken(messaging) {
try {
const currentToken = await getToken(messaging, {
vapidKey: "YOUR_PUBLIC_VAPID_KEY"
});
if (currentToken) {
console.log('FCM Token:', currentToken);
} else {
console.log('No registration token available.');
}
} catch (error) {
console.error('An error occurred while retrieving token.', error);
}
}
}
এখানে:
- Notification.requestPermission(): এটি ইউজারের কাছ থেকে পুশ নোটিফিকেশন গ্রহণের অনুমতি চায়।
৬. Server Side: Firebase Cloud Messaging ব্যবহার করা
একবার FCM টোকেন পাওয়ার পর, সার্ভার সাইড থেকে Firebase Cloud Messaging API ব্যবহার করে পুশ নোটিফিকেশন পাঠানো যাবে। নিচে একটি Node.js উদাহরণ দেয়া হলো।
৬.১ Firebase Admin SDK ইনস্টল করা
npm install firebase-admin
৬.২ Node.js সার্ভার সাইড কোড
const admin = require("firebase-admin");
admin.initializeApp({
credential: admin.credential.applicationDefault()
});
const message = {
token: 'FCM_DEVICE_TOKEN',
notification: {
title: 'Hello!',
body: 'This is a push notification sent from Firebase.'
}
};
admin.messaging().send(message)
.then((response) => {
console.log('Successfully sent message:', response);
})
.catch((error) => {
console.log('Error sending message:', error);
});
এখানে:
- FCM_DEVICE_TOKEN: এটি ফ্রন্টএন্ড থেকে প্রাপ্ত FCM টোকেন যা নির্দিষ্ট ডিভাইসে নোটিফিকেশন পাঠানোর জন্য ব্যবহৃত হয়।
- admin.messaging().send(message): এটি সার্ভার থেকে পুশ নোটিফিকেশন পাঠায়।
৭. Push Notification ব্যবহারকারী ইন্টারফেস
নোটিফিকেশন দেখানোর জন্য, Ionic অ্যাপ্লিকেশনে Notification API এবং Ionic এর Push Notification প্যাকেজ ব্যবহার করা যেতে পারে।
সারাংশ
Firebase Cloud Messaging (FCM) এর সাহায্যে আপনি Ionic অ্যাপ্লিকেশনে পুশ নোটিফিকেশন পাঠাতে পারেন।
- Firebase কনসোল থেকে আপনার প্রজেক্ট তৈরি করতে হবে এবং FCM সেটআপ করতে হবে।
- Ionic অ্যাপে FCM টোকেন রিট্রিভ করার জন্য Firebase SDK ব্যবহার করতে হবে।
- Server side থেকে Firebase Admin SDK ব্যবহার করে নোটিফিকেশন পাঠানো যাবে।
এভাবে আপনি রিয়েল-টাইম পুশ নোটিফিকেশন পাঠাতে এবং গ্রহণ করতে পারবেন।
